<!doctype html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轱辘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            --button-height: 32px;
            --font-size: 14px;
            --button-bg: white;
            --button-active-bg: #eee;
            --border-radius: 4px;
            --color: #333;
            --border-color: #999;
            --border-color-hover: #666666;
        }

        #app {
            margin: 20px;
        }
        body {
            font-size: var(--font-size);
        }
    </style>
    <style>
        .box{
            margin: 20px;
        }
    </style>
    <style>

    </style>
</head>
<body>
<div id='app'>

    <g-row>
        <g-col>1</g-col>
        <g-col>2</g-col>
    </g-row>
    <g-row>
        <g-col>1</g-col>
        <g-col>2</g-col>
        <g-col>3</g-col>
    </g-row>
    <g-row>
        <g-col>1</g-col>
        <g-col>2</g-col>
        <g-col>3</g-col>
        <g-col>4</g-col>
    </g-row>
    <g-row>
        <g-col span="2">1</g-col>
        <g-col span="22">11</g-col>
    </g-row>
    <g-row>
        <g-col span="4">1</g-col>
        <g-col span="20">11</g-col>
    </g-row>
    <hr>
    <div class="box">
        <g-input value="张三" disabled></g-input>
        <g-input value="李四" readonly></g-input>
        <g-input value="王五"></g-input>
    </div>
    <div class="box">
        <g-input value="王" error="姓名不能少于两个字"></g-input>
    </div>
    <div class="box">
        <g-button :loading="loading1" @click="loading1 = !loading1">
            按钮
        </g-button>
        <g-button icon="settings" :loading="loading2"
                  @click="loading2 = !loading2">
            按钮
        </g-button>
        <g-button icon="settings" icon-position="right" :loading="loading3"
                  @click="loading3 = !loading3">
            按钮
        </g-button>
        <g-button-group>
            <g-button icon="left">上一页</g-button>
            <g-button>更多</g-button>
            <g-button icon="right" icon-position="right">下一页</g-button>
        </g-button-group>
    </div>
</div>
<script src="src/app.js"></script>

</body>
</html>